<template>
  <div v-bind="$attrs" :class="props.element.className || 'loc-point-mark'" class="absolute" @click="generalEvent">
    <template v-if="['camera', 'people', 'callin'].indexOf(propValue.type) !== -1">
      <px-tooltip v-if="propValue.tip" placement="top" effect="dark">
        <template #content>
          <div class="flex items-center justify-center">
            <span>{{ propValue.tip }}</span>
          </div>
        </template>
        <component :is="imgMap[propValue.type]" class="w-[100%] h-[100%]" />
      </px-tooltip>
      <component :is="imgMap[propValue.type]" v-else class="w-[100%] h-[100%]" />
    </template>

    <px-popover
      v-else-if="
        (propValue.type === 'temperature' && temperature.length > 0 && temperatureShow) ||
        (propValue.type === 'temperature' && isVisualEditer) ||
        propValue.type === 'sensor'
      "
      placement="top"
      :width="propValue.type === 'sensor' || temperature.length === 1 ? 128 : 224"
      trigger="hover"
    >
      <template #reference>
        <component
          :is="imgMap[propValue.type]"
          :class="{ sensor: propValue.type == 'sensor' && sensor == '正常', sensorError: propValue.type == 'sensor' && sensor !== '正常' && sensor }"
          class="w-[100%] h-[100%]"
        />
      </template>
      <div v-if="propValue.type === 'sensor'" class="flex flex-col">
        <div class="flex text-[14px] font-normal w-[100%]">
          <div class="box">
            <div class="scroll-wrap">
              <div class="scroll-item">{{ `${propValue.category}(${propValue.code})` }}</div>
            </div>
          </div>
        </div>

        <div class="text-[14px] font-normal">状态</div>
        <div class="text-[22px] font-semibold">{{ sensor }}</div>
      </div>
      <div v-else class="flex">
        <template v-for="item in temperature" :key="item.uniqueName">
          <div v-if="item.value" class="flex flex-col" :class="{ 'w-[50%]': temperature.length === 2, 'w-[100%]': temperature.length === 1 }">
            <div class="text-[14px] font-normal flex justify-center">{{ item.name }}</div>
            <div class="text-[22px] font-semibold flex justify-center">
              {{ item.value }}<span class="text-[14px] font-normal">{{ item.unit }}</span>
            </div>
          </div>
        </template>
      </div>
    </px-popover>
    <Ripple v-if="propValue.type === 'sensor' && sensor !== '正常' && sensor" />
  </div>
  <px-dialog
    v-model="carameDialogVisible"
    title="摄像头监控"
    width="700px"
    destroy-on-close
    modal-class="px--visual-camera__dialog"
    style="pointer-events: auto"
    draggable
    :modal="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeDialog"
  >
    <div class="flex w-[100%] h-[100%] justify-center">
      <!-- <video id="flvVideo" ref="flvRef" width="600" style="object-fit: fill" muted controls autoplay @click="videoClick" /> -->
      <div ref="flvRef" style="width: 600px" />
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { computed, defineAsyncComponent, onMounted, reactive, ref, toRaw, toRefs, watch, inject } from "vue";
import useFlv from "@visual/utils/useFlv";
import { queryTempAndHumid } from "@/api/visual/visualConfig";

const isVisualEditer = inject("isVisualEditer", false);
const sensorRoomVal = inject("sensorRoomVal", ref(null));
const tempAndHumidSource = inject("tempAndHumidSource", ref(null));
import Ripple from "./ripple.vue";

const props = defineProps<{
  propValue?: {
    title: string;
    tip: string;
    routerKey: string;
    type: string;
    num: number;
    cameraUrl: string;
    code: string;
    category: string;
    openPage: string;
    groupName: string;
  };
  remoteData?: { [key: string]: any };
  element?: { [key: string]: any };
}>();

const imgMap = {};
const carameDialogVisible = ref(false);
const flvRef = ref();
let compArr = ["camera", "people", "sensor", "temperature", "callin"];

const { getFlv, videoClick, destoryVideo } = useFlv({ videoRef: flvRef, cameraUrl: props.propValue.cameraUrl });
const temperature = ref([]);
const temperatureShow = ref(false);
const sensor = ref("正常");
for (let i = 0; i < compArr.length; i++) {
  let comp = defineAsyncComponent(() => import(`../../assets/filter/${compArr[i]}_loc.svg?component`));

  let name = compArr[i];

  imgMap[name] = comp;
}

const emits = defineEmits(["generalEvent"]);

const generalEvent = async () => {
  console.error("provide-->", isVisualEditer);
  if (isVisualEditer) return;

  if (props.propValue.type === "camera" && props.propValue.cameraUrl) {
    videoClick();
    carameDialogVisible.value = true;
    try {
      getFlv();
    } catch (e) {
      console.error(e);
    }
  } else if (props.propValue.type === "callin" || props.propValue.type === "people") {
    let openPage = props.propValue.openPage;
    if (!openPage) {
      if (props.propValue.type === "callin") openPage = "http://10.110.210.182/#/workplace";
      if (props.propValue.type === "people") openPage = "http://10.110.207.247:8180/localsense";
    }
    window.open(openPage, "_blank");
  }
};

watch(
  sensorRoomVal,
  res => {
    if (res && JSON.stringify(res) !== "{}" && props.propValue.type === "sensor") {
      const item = res[props.propValue.code];
      if (item) {
        const { statusDesc } = item;
        if (statusDesc) sensor.value = statusDesc;
      }
    }
  },
  { immediate: true }
);
watch(
  tempAndHumidSource,
  res => {
    if (res && props.propValue.type === "temperature") {
      const item = res[props.propValue.groupName];
      if (item) {
        temperature.value = item;
        temperatureShow.value = item.some(el => el.value || el.value === 0);
      }
    }
  },
  { immediate: true }
);

const closeDialog = () => {
  destoryVideo();
};
</script>
<style lang="scss" scoped>
@keyframes scroll {
  0% {
    margin-left: 0;
    transform: translateX(0);
  }

  10% {
    margin-left: 0;
    transform: translateX(0);
  }

  90% {
    margin-left: 100%;
    transform: translateX(-100%);
  }

  100% {
    margin-left: 100%;
    transform: translateX(-100%);
  }
}

.loc-point-mark {
  transform-origin: 0 0;
}

svg {
  outline: none;
}
// 个性化部分 ⬇️
.box {
  width: 100%;
}

// 通用代码部分 ⬇️
.scroll-wrap {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
}

.scroll-item {
  float: left;
  animation: scroll linear 4s alternate infinite;
}

.sensor {
  color: #2893eb;
}

.sensorError {
  color: red;
}
</style>
<style>
.px--visual-camera__dialog {
  pointer-events: none;
}
</style>
